<template>
  <div class="dataRate">
    <el-table
        :data="tableData"
        row-key="id"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        style="width: 100%"
        :header-cell-style="{color: '#333333'}"
        :header-row-style="{background:'#DCDFE6'}"
        :cell-style="cellStyle"
    >
      <el-table-column
          v-for="(item,index) in tableHeader"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          align="center"
          min-width="100"
      />
    </el-table>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
import {approvalPass} from "@/api/dataSummary";
@Component
export default class DataRate extends Vue {
  @Prop()
  private areaData!: any;
  @Watch("areaData",{immediate:true,deep:true})
  changeAreaData() {
    this.search()
  }
  tableData: any = []
  tableHeader:any = []
  cellStyle({ row, column,rowIndex }) {
    if (rowIndex === 0 || rowIndex === 1) {
      return {
        color: '#5b9a8e',
        fontWeight: 'bold'
      }
    }
  }
  search(){
    const { areaId,workId } = this.areaData
    if(areaId && workId){
      approvalPass({areaId,workId}).then(res=>{
        const {data,title} = res.data
        if(data){
          this.tableData = data
        }
        if(title){
          this.tableHeader = title
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dataRate{
  overflow: auto;
}
</style>
